<template>
  <div class="left3">
    <div class="bt">
      <div class="tit1">播种面积排名 &nbsp;&nbsp;&nbsp;
        （单位：万亩）
      </div>
      <div class="year">
        <div class="yname">请选择年份：
        <select v-model="selected" @change="renderChart">
          <option v-for="(option, index) in options" :value="index">{{ option }}</option>
        </select>
        </div>
      </div>
    </div>
    <div class="partLeftThree" ref="chartsRef"></div>
    </div>


</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
const options = ['2019', '2020', '2021','2022','2023'];
let selected = 0;

const chartData = [
  {
    year: '2019',
    data: [
      {name: '海青乡', value: 983453.8},
      {name: '浓桥镇', value: 764418.0},
      {name: '鸭南乡', value: 504918.0},
      {name: '寒葱',   value:500418.0},
      {name: '浓江乡',   value:470918.0},
      {name: '乌苏镇',   value:369821.6},
      {name: '通江乡',   value:299322.9},
      {name: '别拉洪乡', value:243247.6},
      {name: '黑瞎子岛镇',value:214592.5},
      {name: '抚远镇',   value:170091.9},
    ]
  },
  {
    year: '2020',
    data: [
      {name: '通江乡', value: 983453.8},
      {name:'乌苏镇' , value: 764418.0},
      {name: '鸭南乡', value: 504918.0},
      {name: '抚远镇',   value:500418.0},
      {name: '浓江乡',   value:470918.0},
      {name: '浓桥镇',   value:369821.6},
      {name: '海青乡',   value:299322.9},
      {name: '别拉洪乡', value:243247.6},
      {name: '黑瞎子岛镇',value:214592.5},
      {name: '寒葱',   value:170091.9},
    ]
  },
  {
    year: '2021',
    data: [
      {name: '海青乡', value: 983453.8},
      {name: '浓桥镇', value: 764418.0},
      {name: '鸭南乡', value: 504918.0},
      {name: '寒葱',   value:500418.0},
      {name: '浓江乡',   value:470918.0},
      {name: '乌苏镇',   value:369821.6},
      {name: '通江乡',   value:299322.9},
      {name: '别拉洪乡', value:243247.6},
      {name: '黑瞎子岛镇',value:214592.5},
      {name: '抚远镇',   value:170091.9},
    ]
  },
  {
    year: '2022',
    data: [
      {name: '乌苏镇', value: 983453.8},
      {name: '浓桥镇', value: 764418.0},
      {name: '鸭南乡', value: 504918.0},
      {name: '寒葱',   value:500418.0},
      {name: '浓江乡',   value:470918.0},
      {name: '海青乡',   value:369821.6},
      {name: '通江乡',   value:299322.9},
      {name: '别拉洪乡', value:243247.6},
      {name: '黑瞎子岛镇',value:214592.5},
      {name: '抚远镇',   value:170091.9},
    ]
  },
  {
    year: '2023',
    data: [
      {name: '鸭南乡', value: 983453.8},
      {name: '浓桥镇', value: 664418.0},
      {name: '海青乡', value: 500918.0},
      {name: '寒葱',   value:400918.0},
      {name: '黑瞎子岛镇',   value:370918.0},
      {name: '乌苏镇',   value:269821.6},
      {name: '抚远镇',   value:243247.9},
      {name: '别拉洪乡', value:199322.6},
      {name: '浓江乡',value:174592.5},
      {name: '通江乡',   value:170091.9},
    ]
  },

];

const chartsRef = ref(null)
const renderChart = () => {
  const chart = echarts.init(chartsRef.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {type: 'shadow'}
    },
    grid: {
      left: "3%",
      top: "10%",
      bottom: "10%",
      right: "10%",
      containLabel: true },
    xAxis: {
      type: 'value',
      boundaryGap:false,
      axisLine:{
        show:false,
      },
      axisTick:{
        show: false,
      },
      splitLine: {show:false},
      show: false
    },
    yAxis: {
      nameTextStyle:{
        color:'#fcfafa',
      },
      axisLabel: {
        color: '#fcfcfc'
      },
      type: 'category',
      data: chartData[selected].data.map(item => item.name),
      inverse: true,
      offset:6,
    },
    label: {
       show: true,
      position: 'right',
      color: 'white',
    },
    series: [
      {
        realtimeSort: true,
        type: 'bar',
        itemStyle: { // 柱状图的背景色(渐变色设置)
          normal: {
            // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function (params) {
              var index = params.dataIndex
              var colorList = [
                // 渐变颜色的色值和透明度
                // 透明度从0
                ['rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)', 'rgba(22,111,68,0.95)'], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
                ['rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)','rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)', 'rgba(14,236,151,0.99)']
              ]
              return {
                colorStops: [{
                  offset: 0.2, // 颜色的开始位置
                  color: colorList[0][index] // 0% 处的颜色
                },
                  {
                    offset: 0.4, // 颜色的结束位置
                    color: colorList[1][index] // 100% 处的颜色
                  }]
              }
            }
          }
            },
        data: chartData[selected].data.map(item => item.value),
        showBackground: false,
        barWidth: '45%',//设置水平柱子的宽度
        }
    ],

  }
  chart.setOption(option);
};
onMounted(()=>renderChart())
</script>

<style lang="scss" scoped>
.left3{
  width: 25%;
  height: calc(100%/3 - 57px);
  background-image: url(@/assets/img/backg1.png);
  background-size: 100% 100%;
  position: fixed;
  top: calc(100%/3 + 100%/3 + 24px );
  float: left;
}
.partLeftThree{
  height: 100%;
  margin: 25px auto auto auto;
  width: 100%
}
.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}

.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}
.year{
  width: 40%;
  height: 100%;
  float: right;
  line-height: 10px;
  font-size: 6px;
}

.yname{
  margin-top: 10%;
  float: left;
  color: #ffffff;
}
</style>
